<template>
	<view>
		<up-navbar title="接单大厅">
			<template #left>
				<view class="" style="position: relative;z-index: 99999;">
					<picker mode="multiSelector" :range="multiData" range-key="name" @change="handleMultiChange"
						@columnchange="handleColumnChange" @click="show10=false">
						<!-- 			      <view class="picker">
				        当前选择：{{ selectedProvince.name || '请选择省份' }} - {{ selectedCity.name || '请选择城市' }}
				      </view> -->
						<view class="" style="display: flex;align-items: center;">
							<image src="../../static/luc.png" mode="widthFix" style="width: 40rpx;"></image>
							<text style="font-size: 30rpx;margin-left: 6rpx;">{{selectedCity.name || "全国"}}</text>
						</view>
					</picker>

				</view>
			</template>
		</up-navbar>
		<view class=""
			style="position: fixed;top: 160rpx;background-color: rgba(1, 1, 1, .5);padding:16rpx 20rpx;border-radius: 1000rpx;width: 96vw;z-index: 9999;color: white;font-size: 28rpx;left: 2vw;display: flex;align-items: center;"
			:style="show10?'':'max-width:0px;max-height:0px;overflow: hidden;opacity: 0;'">
			请选择你所在的城市，以获取周边任务
			<view class="">
				<picker mode="multiSelector" :range="multiData" range-key="name" @change="handleMultiChange"
					@columnchange="handleColumnChange">
					<view class=""
						style="display: flex;align-items: center;background-color: #f07160;color: white;border-radius:40rpx;padding: 8rpx 28rpx;margin-left: 20px;"
						@click="show10=false">
						<text style="font-size: 30rpx;">去选择</text>
					</view>
				</picker>
			</view>
		</view>
		<view v-if="nowid==1">
			<view class="w-1 sticky bg-ff">
				<up-tabs lineColor="#01796D" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :current="curtab"
					:list="tabs" :scrollable="true" @click="clickTab">
				</up-tabs>
			</view>

			<view class="p-30 w-1">
				<view class="w-1 bg-ff br-20 m-b-30 relative" @click="todetail(item)" v-for="(item,index) in list"
					:key="index">
					<view class="w-1 p-30 fl-s-s">
						<view class="w-1 fr-b-c">
							<text class="c-33 fs-28 bold" v-if="item.goods.lenth">{{item.goods[0].title}}</text>
							<text class="c-price fs-28" v-if="item.state!=12">{{obj[item.state]}}</text>
							<block v-else>
								<text class="c-price fs-28">{{item.materpaytime?'服务中':obj[item.state]}}</text>
							</block>
						</view>
						<view class="w-1 fl-s-s m-t-10" v-for="(items,indexs) in item.goods" :key="indexs">
							<view class="fr-s-c w-1">
								<text class="flex-1 c-77 fs-24  text-line-2">规格名称：{{items.skuons || '默认'}}</text>
							</view>
							<view class="fr-b-c w-1 m-t-10">
								<text class="c-77 fs-24">x{{items.total}}</text>
								<view class="c-33 fs-24 bold">
									<text>￥</text>
									<text class="bold">{{items.price}}</text>
								</view>
							</view>
						</view>
						<text class="m-t-20 c-77 fs-24">期望上门时间：{{item.reservtime}}</text>
						<view class="w-1 fr-s-c m-t-10" v-if="item.state==0 && item.jit_time>0">
							<text class="c-main fs-28">剩余支付时间：</text>
							<up-count-down :time="item.jit_time*1000" format="HH:mm:ss"></up-count-down>
						</view>
						<view class="m-t-30 w-1 bb-solid"></view>
						<view class="w-1 fr-e-c m-t-25 warp">
							<view class="btn3 fr-c m-l-20" @click.stop="closeOrder(item)" v-if="item.state==0">取消订单
							</view>
							<view class="btn3 fr-c m-l-20" @click.stop="$to('./ModifyAppointment?sn='+item.ordersn)"
								v-if="item.state==1">修改预约</view>
							<view class="btn1 fr-c m-l-20" @click.stop="call(item.starf_mobile)" v-if="item.state==10">
								联系师傅</view>
							<view class="btn1 fr-c m-l-20" @click.stop="subpay(item)"
								v-if="item.state==0 || (item.state==12 && !item.materpaytime)">立即支付</view>
							<view class="btn1 fr-c m-l-20" @click.stop="sureover(item)" v-if="item.state==13">确认完成
							</view>
							<view class="btn1 fr-c m-l-20" @click.stop="pj(item)"
								v-if="item.state==2 && item.pj_time==0">点击评价
							</view>
							<view class="btn1 fr-c m-l-20" @click.stop="sc(item)" v-if="item.state==3 ">删除订单
							</view>
							<view class="btn1 fr-c m-l-20" @click.stop="look(item)"
								v-if="item.state==2 && item.pj_time">查看评价
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="w-1 p-t-150" v-if="nodata">
				<up-empty :icon="$icon"></up-empty>
			</view>
		</view>


		<view class="" v-if="nowid==2">
			<comorder ref="sorder"></comorder>
		</view>


		<up-tabbar :value="nowid==1?2:1" @change="changeTabindex" activeColor="#01796D" inactiveColor="#A4A4A4">
			<up-tabbar-item text="首页">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1.png`">
					</image>
				</template>
			</up-tabbar-item>
			<up-tabbar-item :text="nowid==1?'服务':'接单大厅'" :badge="nowid==1?null:num">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2s.png':'/static/images/tabbar/t3s.png'"></image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2.png':'/static/images/tabbar/t3.png'"></image>
				</template>
			</up-tabbar-item>
			<!-- 			<up-tabbar-item v-if="nowid==1" text="订单">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3.png`">
					</image>
				</template>
			</up-tabbar-item> -->
			<up-tabbar-item text="我的">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4.png`">
					</image>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia';
	import useUserStore from '@/stores/user.js';

	const {
		nowid
	} = storeToRefs(useUserStore())
	uni.hideTabBar()
	import {
		provinceData,
		cityData
	} from '@/utils/area.js';
	const multiData = ref([provinceData, cityData[0]]);
	const selectedProvince = ref({});
	const selectedCity = ref({});
	const multiIndex = ref([0, 0]);
	const sorder = ref(null);
	const handleColumnChange = (e) => {
		if (e.detail.column === 0) { // 省份列变化
			const provinceIndex = e.detail.value;
			console.log(provinceIndex)
			selectedProvince.value = provinceData[provinceIndex];
			console.log(selectedProvince.value)
			multiData.value[1] = cityData[selectedProvince.value.id] || [];
			multiIndex.value = [provinceIndex, 0];
		}
	};

	// 最终选择
	const handleMultiChange = (e) => {
		console.log("==============", e)
		const [provinceIndex, cityIndex] = e.detail.value;
		selectedProvince.value = provinceData[provinceIndex];
		selectedCity.value = cityData[selectedProvince.value.id][cityIndex];
		uni.setStorageSync("city", selectedCity.value);
		uni.setStorageSync("selectedProvince", selectedProvince.value);
		if (selectedCity.value.name == "全国") {
			selectedCity.value = {}
			selectedProvince.value = {}
			uni.removeStorageSync("city");
			uni.removeStorageSync("selectedProvince");
			sorder.value.setValue("", "")
		} else {
			console.log(selectedCity.value.name)
			sorder.value.setValue(selectedCity.value.name, selectedProvince.value.name)
		}
		let para = {
			type: 1,
			page: 1,
			pageSize: 200,
			city: selectedCity.value.name || undefined
		}
		if (!selectedCity.value.name) {
			delete para.city
		}
		uni.$get({
			url: '/api/Ordersystem/Takingorders',
			data: para
		}).then(res => {
			num.value = res.data.length;
		})
	};

	const tindex = ref(2)
	const changeTabindex = val => {
		console.log(val)
		let arr = nowid.value == 1 ? ['/pages/index/index', '/pages/Classify/Classify', '/pages/Order/Order',
			'/pages/User/User'
		] : ['/pages/index/index', '/pages/Order/Order', '/pages/User/User'];
		uni.switchTab({
			url: arr[val]
		})
	}

	import comorder from '@/pages/seconds/Order.vue'

	function choose() {

	}


	function todetail(item) {
		uni.$to('./Detail?sn=' + item.ordersn)
	}


	function call(val) {
		uni.makePhoneCall({
			phoneNumber: String(val)
		})
	}

	const obj = {
		0: '待付款',
		1: '待接单',
		2: '已完成',
		3: '已关闭',
		4: '已发货',
		5: '待评价',
		6: '售后中',
		7: '售后成功',
		8: '退换货',
		9: '拒绝售后',
		10: '已接单',
		11: '服务中',
		12: '待缴费',
		13: '完成待确认',
	}

	const citem = ref('')

	function pj(e) {
		uni.navigateTo({
			url: "/pages/pj/pj?id=" + e.id
		})
	}

	function sc(e) {
		uni.$post({
			url: '/api/Ordersystem/delorder',
			data: {
				id: e.id
			}
		}).then(res => {
			reget(true)
		})
	}

	function look(e) {
		uni.navigateTo({
			url: "/pages/pj1/pj1?id=" + e.id
		})
	}

	function closeOrder(item) {
		uni.navigateTo({
			url: '/pages/Order/ChooseCancenReason?id=' + item.id + '&state=' + item.state
		})
	}


	function sureover(item) {
		uni.showModal({
			title: '提示',
			content: '确认师傅已完成了吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$post({
						url: '/api/Ordersystem/Maindtoconfirmorder',
						data: {
							aid: item.id
						}
					}).then(res => {
						getApp().tt(res.msg, 'success')
						reget(false)
					})
				}
			}
		})
	}









	const pay = ref(null)
	const show10 = ref(false)

	function subpay(item) {
		citem.value = item;
		// pay.value.show = true;
		confirmpay(item)
	}

	function confirmpay(item, val = 2) {
		console.log(val)
		let obj = {
			0: 'money',
			1: 'alipay',
			2: 'wechat'
		}
		uni.$post({
			// 0 待支付下单费用  12 待支付材料费上门费等
			url: item.state == 0 ? '/api/Ordersystem/payorder' : '/api/Ordersystem/payingListofmaters',
			data: {
				oid: item.id,
				ordersn: citem.value.ordersn,
				paytype: obj[val],
			}
		}).then(res => {
			if (val != 0) {
				uni.requestPayment({
					"provider": val == 2 ? "wxpay" : 'alipay',
					...res.data,
					success: (res) => {
						pay.value.show = false;
						uni.$tt('支付成功', 'success');
						// uni.$delayBack()
						reget(false)
					},
					fail: err => {
						uni.$tt('支付失败', 'error')
						// uni.$delayBack()
					}
				})
			} else {
				// pay.value.show = false;
				uni.$tt(res.msg, 'success');
				reget(false)
			}
		})
	}

	// 0待付款，1待发货，2已完成， 3=取消支付 4待收货，5待评价，6售后，-1全部订单
	const tabs = ref([{
			name: '全部',
			val: -1,
			tab: 0,
		},
		{
			name: '待付款',
			val: 0,
		},
		{
			name: '待接单',
			val: 1,
			tab: 1
		},
		{
			name: '已接单',
			val: 10,
			tab: 2
		}, {
			name: '服务中',
			val: 11,
			tab: 3
		},
		{
			name: '已完成',
			val: 2,
			tab: 4
		}
	]);
	const activeStyle = {
		'font-weight': 800,
		'font-size': '32rpx',
		color: '#01796D'
	}
	const inactiveStyle = {
		'font-weight': 400,
		'font-size': '30rpx',
		color: '#333333'
	}

	const curtab = ref(0)

	function clickTab(e) {
		curtab.value = e.index;
		uni.setStorageSync('oindex', tabs.value[curtab.value].tab)
		reget(true)
	}
	onLoad(o => {
		if (uni.getStorageSync("city")) {
			show10.value = false;
			selectedCity.value = uni.getStorageSync("city");
			selectedProvince.value = uni.getStorageSync("selectedProvince");
		} else {
			setTimeout(() => {
				show10.value = true;
			}, 2000)
			selectedCity.value = {

			}
			selectedProvince.value = {

			}
		}
		uni.setNavigationBarTitle({
			title: nowid.value == 1 ? '订单' : '接单大厅'
		})
		if (nowid.value == 1) {
			uni.setStorageSync('oindex', 0)
			if (uni.getStorageSync('user')) {
				getlist()
			} else {
				nodata.value = true
			}
			uni.$on('reorder', val => {
				reget(false)
			})
		}
	})

	onUnload(() => {
		if (nowid.value == 1) {
			uni.$off('reorder')
		}
	})


	onShow(() => {
		uni.setNavigationBarTitle({
			title: nowid.value == 1 ? '订单' : '接单大厅'
		})
		if (nowid.value == 1) {
			// let oindex = uni.getStorageSync('oindex') * 1 || 0;
			// let index = 0;
			// switch (oindex) {
			// 	case 0:
			// 		index = 0;
			// 		break;
			// 	case 1:
			// 		index = 2;
			// 		break;
			// 	case 2:
			// 		index = 3;
			// 		break;
			// 	case 3:
			// 		index = 4;
			// 		break;
			// 	case 4:
			// 		index = 5;
			// 		break;
			// 	case 5:
			// 		index = 0;
			// 		break;
			// 	default:
			// 		index = 0;
			// 		break;
			// }

			// if (curtab.value != index) {
			// 	curtab.value = index;
			// 	reget(true)
			// }
		} else {
			let para = {
				type: 1,
				page: 1,
				pageSize: 200,
				city: selectedCity.value.name || undefined
			}
			if (!selectedCity.value.name) {
				delete para.city
			}
			uni.$get({
				url: '/api/Ordersystem/Takingorders',
				data: para
			}).then(res => {
				num.value = res.data.length;
			})
		}

	})


	const page = ref(1);
	const num = ref(0);
	const list = ref([]);
	const nodata = ref(false);
	const loadmore = ref(true);

	function getlist(loading = true) {
		if (!uni.getStorageSync('user')) return nodata.value = true;
		uni.$post({
			url: '/api/Ordersystem/orderlst',
			data: {
				page: page.value,
				type: tabs.value[curtab.value].val,
			},
			loading
		}).then(res => {
			if (page.value == 1) list.value = [];
			list.value = [...list.value, ...res.data];
			nodata.value = !list.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			list.value = [];
			nodata.value = !list.value.length;
			loadmore.value = true;
		})
	}

	function reget(loading = false) {
		page.value = 1
		getlist(loading)
	}

	onPullDownRefresh(() => {
		if (nowid.value == 1) {
			if (uni.getStorageSync('user')) {
				reget(true)
			} else {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			}
		}
	})

	onReachBottom(() => {
		if (nowid.value == 1) {
			if (loadmore.value) {
				page.value++;
				getlist()
			}
		}
	})
</script>

<style>
	page {
		background: #f1f5f6;

	}


	.btn1 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #01796d;
		font-size: 28rpx;
	}

	.btn2 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #ff6251;
		font-size: 28rpx;

	}

	.btn3 {
		min-width: 170rpx;
		padding: 0 15rpx;
		text-align: center;
		color: #505050;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #E5E5E5;
		font-size: 28rpx;
	}

	.btn4 {
		font-size: 28rpx;
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 64rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #fe9203;
		font-weight: bold;
	}

	:deep(.u-count-down__text) {
		color: #E24700 !important;
		font-size: 28rpx !important;
	}

	.sbtn {
		width: 164rpx;
		height: 52rpx;
		background: #eeeeee;
		border-radius: 32rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>